<script setup lang="tsx">
import { PropType, ref, watch, reactive } from 'vue'
import { Qrcode } from '@/components/Qrcode'
import { Descriptions, DescriptionsSchema } from '@/components/Descriptions'
import { ContentWrap } from '@/components/ContentWrap'
import { ElRow, ElCard, ElCol, ElMessage } from 'element-plus'
import { SpanMethodProps, VideoDt } from '@/api/course/type'
import lookVideos from '@/views/examination/components/lookVideos.vue'
import { GetCoursePlanDetailApi } from '@/api/course'
import { Table, TableColumn } from '@/components/Table'
import { useI18n } from 'vue-i18n'
import { useTable } from '@/hooks/web/useTable'
import { BaseButton } from '@/components/Button'
import { Dialog } from '@/components/Dialog'
const { t } = useI18n()
const props = defineProps({
  currentRow: {
    type: Object,
    default: () => undefined
  },
  detailSchema: {
    type: Array as PropType<DescriptionsSchema[]>,
    default: () => []
  }
})
interface user {
  UserName: string
  UserNo: string
  DepNo: string
  DepName: string
}
const chooes = ref<user[]>([])
const planGuid = ref('')
const videoList = ref<VideoDt[]>([])
const dialogVisible = ref(false)
const tableColumns = reactive<TableColumn[]>([
  {
    field: 'index',
    label: t('userDemo.index'),
    type: 'index'
  },
  // {
  //   field: 'depName',
  //   label: '部门'
  // },
  {
    field: 'userNames',
    label: '参加人员'
  },

  {
    field: 'len',
    label: '人数',
    width: 60
  },
  {
    field: 'videoId',
    label: '视频',
    width: 100,
    slots: {
      default: (data: any) => {
        let videoPath = data.row.videos
        return (
          <>
            {videoPath ? (
              <BaseButton
                type="primary"
                onClick={() => {
                  dialogVisible.value = true
                  videoList.value = videoPath
                }}
              >
                查看
              </BaseButton>
            ) : null}
          </>
        )
      }
    }
  }
])
interface PlanDetail {
  // depName: string
  userNames: string
  videoId: string
  videos: Array<VideoDt>
}
let list: PlanDetail[] = []
const { tableRegister, tableState, tableMethods } = useTable({
  fetchDataApi: async () => {
    const res = await GetCoursePlanDetailApi({
      planGuid: planGuid.value
    })

    res.data.map((item) => {
      let users = JSON.parse(item.userNo)
      let videos: VideoDt[] = []
      item.videos.map((item: any) => {
        let videoLength = item.videoTime
        let hour = parseInt(videoLength / 3600 + '')
        let minute = parseInt((videoLength % 3600) / 60 + '')
        let second = parseInt((videoLength % 60) + '')
        videos.push({
          ...item,
          videoTime: `${hour}小时${minute}分钟${second}秒`
        })
      })
      let userNames = ''
      users.map((user) => {
        userNames += `${user.DepName}-${user.UserName}、`
      })
      userNames = userNames.slice(0, userNames.length - 1)
      let obj = {
        // depName: user.depName,
        userNames: userNames,
        len: users.length,
        videoId: item.videoId,
        videos: videos
      }
      list.push(obj)
    })

    return {
      list: list,
      total: res.data.totalCount || 0
    }
  }
})

const { dataList, loading, total } = tableState
// const { getList, getElTableExpose, delList } = tableMethods

watch(
  () => props.currentRow,
  (currentRow) => {
    if (!currentRow) return
    // currentRow.chooes.map((item) => {
    //   let a = item.split('$')
    //   chooes.value.push({ UserName: a[1], UserNo: a[0], DepNo: a[2], DepName: a[3] })
    // })
    // chooes.value = currentRow.chooes
    // console.log(currentRow.chooes, currentRow.examArr)
    planGuid.value = currentRow.guid
    // getList()
  },

  {
    deep: true,
    immediate: true
  }
)
const detailSpanMethod = ({ row, column, rowIndex, columnIndex }: SpanMethodProps) => {
  if (columnIndex === 1 || columnIndex === 2 || columnIndex === 3) {
    // 当前列为0的时候不进行操作单元格
    const name = row[column.property]
    const preRow = list[rowIndex - 1]
    const preValue = preRow ? preRow[column.property] : null
    if (name === preValue) {
      return { rowspan: 0, colspan: 0 } // 不生成单元格
    } else {
      let rowspan = 1
      for (let i = rowIndex + 1; i < list.length; i++) {
        const nextRow = list[i]
        const nextValue = nextRow[column.property]
        if (nextValue === name) {
          rowspan++
        } else {
          break
        }
      }
      return { rowspan, colspan: 1 }
    }
  }
}
</script>

<template>
  <Descriptions :schema="detailSchema" :data="currentRow || {}" />

  <Table
    :columns="tableColumns"
    node-key="videoId"
    :data="dataList"
    :loading="loading"
    @register="tableRegister"
  />
  <!--   :span-method="detailSpanMethod" -->
  <!-- <ContentWrap :title="'计划参加培训人员' + chooes.length + '人'">
    <ElRow :gutter="20">
      <ElCol :xl="8" :lg="10" :md="40" :sm="40" :xs="40" v-for="item in chooes" :key="item.UserNo">
        <ElCard
          shadow="hover"
          class="mb-10px text-center"
          :class="{ 'red-bg': currentRow && !currentRow.examArr.includes(item.UserNo) }"
        >
          <div class="font-bold">{{ item.UserName }}</div>
          <Qrcode :text="'{UserName:' + item.UserName + ',UserNo:' + item.UserNo + '}'" />
        </ElCard>
      </ElCol>
    </ElRow>
  </ContentWrap> -->
  <Dialog v-model="dialogVisible" title="视频" :fullscreen="false">
    <lookVideos :videoList="videoList" />
    <template #footer>
      <BaseButton @click="dialogVisible = false">{{ t('dialogDemo.close') }}</BaseButton>
    </template>
  </Dialog>
</template>
<style scoped>
.red-bg {
  background-color: #f56c6c;
  color: #fff;
}
</style>
